import React from "react";
import "../pagesCss/SubscribePage.css";

function Subscribe({ likedUpMasters }) {
  return (
    <div className="following-page">
      <header className="header">
        <h2>全部关注</h2>
        <div className="filters">
          <span className="filter-option">最常访问</span>
          <span className="filter-option">最近关注</span>
          <div className="search-bar">
            <input type="text" placeholder="搜索" />
            <button className="search-button">🔍</button>
          </div>
        </div>
      </header>

      <ul className="following-list">
        {likedUpMasters.map((user) => (
          <li key={user.userId} className="following-item">
            <img
              src={user.profilePicture}
              alt={`${user.username} avatar`}
              className="avatar"
            />
            <div className="user-info">
              <h3 className="user-name">{user.username}</h3>
            </div>
            <button className="follow-button">已关注</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Subscribe;
